<!-- pages/my/my.vue -->
<template>
	<view class="my page-container">
		<!-- 根据登录状态显示不同内容 -->
		<template v-if="isLoggedIn && userInfo">
			<!-- 已登录状态：显示原有的个人信息等内容 -->
			<view class="user-card elegant-card">
				<view class="user-info">
					<image :src="`http://localhost:8080/download/${userInfo.header}`" class="avatar" @click="navigateTo('/pages/profile/profile')"></image>
					<view class="info-content">
						<text class="nickname">{{ userInfo.username }}</text>
						<text class="phone">{{ userInfo.phone || '未绑定手机号' }}</text>
					</view>
				</view>
			
			</view>

			<!-- 订单状态卡片 -->
			<view class="order-card elegant-card">
				<view class="order-header">
					<text class="title">我的订单</text>
				
				</view>
				<view class="order-status">
					<view class="status-item" @tap="goToOrderList('0')">
						<text class="num">{{orderCounts[0]}}</text>
						<text class="label">待确认</text>
					</view>
					<view class="status-item" @tap="goToOrderList('1')">
						<text class="num">{{orderCounts[1]}}</text>
						<text class="label">已确认</text>
					</view>
					<view class="status-item" @tap="goToOrderList('2')">
						<text class="num">{{orderCounts[2]}}</text>
						<text class="label">已完成</text>
					</view>
				</view>
			</view>

			<!-- 功能菜单 -->
			<view class="menu-card elegant-card">
				<view class="menu-item" @click="navigateTo('/pages/collection/collection')">
					<view class="menu-left">
					
						<text class="menu-text">我的收藏</text>
					</view>
					<text class="arrow">></text>
				</view>
				<view class="menu-item" @click="navigateTo('/pages/appointment/appointment')">
					<view class="menu-left">
			
						<text class="menu-text">我的预约</text>
					</view>
					<text class="arrow">></text>
				</view>
				<view class="menu-item">
					<view class="menu-left">
	
						<text class="menu-text">设置</text>
					</view>
					<text class="arrow">></text>
				</view>
			</view>

			<!-- 退出登录按钮 -->
			<button class="logout-btn" @click="logout">退出登录</button>
		</template>
		
		<template v-else>
			<!-- 未登录状态 -->
			<view class="user-card elegant-card">
				<view class="user-info">
					<image src='/static/tab/logo.png'class="avatar"></image>
					<view class="info-content">
						<text class="nickname">未登录</text>
						<text class="login-tip">点击登录获取更多功能</text>
					</view>
				</view>
			</view>
			
			<!-- 登录按钮 -->
			<button class="login-btn" @click="toLogin">立即登录</button>
		</template>
	</view>
</template>

<script>
import API from '@/api/config.js'

export default {
	data() {
		return {
			isLoggedIn: false,
			userInfo: null,
			stats: {
				collections: 0,
				appointments: 0,
				views: 0
			},
			orderCounts: {
				0: 0, // 待使用
				1: 0, // 待收货
				2: 0  // 待评价
			}
		}
	},
	methods: {
		// 检查登录状态并加载用户信息
		checkLoginStatus() {
			const token = uni.getStorageSync('token')
			this.isLoggedIn = !!token
			console.log('登录状态:', this.isLoggedIn) // 调试日志
			
			if (this.isLoggedIn) {
				this.loadUserInfo()
			} else {
				this.userInfo = null // 确保未登录时清空用户信息
			}
		},

		// 加载用户信息
		async loadUserInfo() {
			try {
				console.log('开始加载用户信息') // 调试日志
				const token = uni.getStorageSync('token')
				console.log('当前token:', token) // 调试日志
				
				if (!token) {
					console.error('未找到token')
					this.handleLoginFailure()
					return
				}
				
				const res = await uni.request({
					url: API.USER_INFO,  // 使用新的个人信息接口
					method: 'GET',
					header: {
						'Authorization': token  // 直接使用token，不添加Bearer前缀
					}
				})

				console.log('用户信息响应:', res.data) // 调试日志

				if (res.data.code === 200) {
					this.userInfo = res.data.data
					this.isLoggedIn = true
				} else {
					this.handleLoginFailure()
				}
			} catch (error) {
				console.error('获取用户信息失败:', error)
				this.handleLoginFailure()
			}
		},

		// 处理登录失效的情况
		handleLoginFailure() {
			this.isLoggedIn = false
			this.userInfo = null
			// 清除本地存储的登录信息
			uni.removeStorageSync('token')
			uni.removeStorageSync('userInfo')
			
			uni.showToast({
				title: '登录已失效，请重新登录',
				icon: 'none',
				duration: 2000
			})
		},

		// 加载用户统计数据
		loadUserStats() {
			if (!this.isLoggedIn) return
			
			uni.request({
				url: API.USER_STATS,
				header: {
					'Authorization': `Bearer ${uni.getStorageSync('token')}`
				},
				success: (res) => {
					if (res.data.code === 200) {
						this.stats = res.data.data
					}
				}
			})
		},

		// 跳转到登录页
		toLogin() {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		},

		// 退出登录
		logout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						// 清除本地存储的token和用户信息
						uni.removeStorageSync('token')
						uni.removeStorageSync('userInfo')
						// 跳转到登录页
						this.toLogin()
					}
				}
			})
		},

		// 页面跳转
		navigateTo(url) {
			// 检查是否登录
			if (!uni.getStorageSync('token')) {
				this.toLogin()
				return
			}
			uni.navigateTo({ url })
		},



		// 跳转到预约列表
		goToOrderList(status) {
			if (!this.isLoggedIn) {
				this.toLogin();
				return;
			}
			
			uni.navigateTo({
				url: `/pages/appointment/appointment?status=${status}`,
				fail: (err) => {
					console.error('页面跳转失败:', err);
					uni.showToast({
						title: '页面跳转失败',
						icon: 'none'
					});
				}
			});
		}
	},
	onLoad() {
		// 页面加载时检查登录状态
		this.checkLoginStatus()
	},
	onShow() {
		// 每次显示页面时检查登录状态
		this.checkLoginStatus()
	
	}
}
</script>

<style scoped>
	.user-card {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.user-info {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		margin-right: 20rpx;
		border: 4rpx solid #FFF;
		box-shadow: 0 4rpx 20rpx rgba(255, 153, 153, 0.2);
	}

	.info-content {
		display: flex;
		flex-direction: column;
	}

	.nickname {
		font-size: 32rpx;
		color: var(--text-color);
		font-weight: bold;
		margin-bottom: 8rpx;
	}

	.phone {
		font-size: 24rpx;
		color: var(--text-light);
	}

	.vip-tag {
		background: linear-gradient(45deg, #FFB199, #FF0066);
		padding: 8rpx 20rpx;
		border-radius: 30rpx;
	}

	.vip-text {
		color: #FFFFFF;
		font-size: 24rpx;
	}

	.stats-card {
		display: flex;
		justify-content: space-around;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.stat-num {
		font-size: 36rpx;
		color: var(--primary-color);
		font-weight: bold;
		margin-bottom: 8rpx;
	}

	.stat-label {
		font-size: 24rpx;
		color: var(--text-light);
	}

	.menu-card {
		margin-bottom: 20rpx;
	}

	.menu-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid var(--border-color);
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-left {
		display: flex;
		align-items: center;
	}

	.iconfont {
		font-size: 36rpx;
		margin-right: 20rpx;
		color: var(--primary-color);
	}

	.menu-text {
		font-size: 28rpx;
		color: var(--text-color);
	}

	.arrow {
		color: var(--text-light);
		font-size: 24rpx;
	}

	.logout-btn {
		margin: 40rpx 30rpx;
		background: var(--primary-color);
		color: #FFFFFF;
		border-radius: 40rpx;
		padding: 20rpx 0;
		font-size: 28rpx;
		border: none;
	}

	.logout-btn:active {
		background: var(--primary-dark);
	}

	.login-tip {
		font-size: 24rpx;
		color: var(--text-light);
	}

	.login-btn {
		margin: 40rpx 30rpx;
		background: var(--primary-color);
		color: #FFFFFF;
		border-radius: 40rpx;
		padding: 20rpx 0;
		font-size: 28rpx;
		border: none;
	}

	.order-card {
		margin-bottom: 20rpx;
		padding: 30rpx;
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.order-header .title {
		font-size: 32rpx;
		color: var(--text-color);
		font-weight: bold;
	}

	.order-header .more {
		font-size: 26rpx;
		color: var(--text-light);
	}

	.order-status {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
	}

	.status-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.status-item .num {
		font-size: 36rpx;
		color: var(--primary-color);
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.status-item .label {
		font-size: 26rpx;
		color: var(--text-light);
	}
</style>